<template>
  <div class="app-container home">
    研究项目名称
    <el-input
      v-model="inputSearch"
      placeholder="请输入内容"
      ref="inputField"
    class="inRes"
    style="margin-right: 10px">
    </el-input>
    <el-button type="primary" @click="searchTitle">查询</el-button>
    <el-button type="success" @click="refresh">刷新</el-button>

    <!-- 项目列表渲染 -->
    <el-row :gutter="24" style="margin-top: 16px">
      <el-col :span="8" v-for="r in researchList" :key="r.id">
        <el-card shadow="hover">
          <div style="font-weight: bold; font-size: 12px; height: 40px;">
            {{ r.sname }}
          </div>
          <div class="cardList">受试者筛选共: {{ r.countTester }} 人</div>
          <div class="container">
            <div class="cardList2">完成入组受试者: {{ r.countGroup }} 人</div>
            <div class="cardList2">完成提交受试者: {{ r.countCrf }} 人</div>
          </div>
          <el-divider></el-divider>
          <center>
            <el-button type="primary" size="mini" plain @click="crfTrans">CRF模板</el-button>
            <el-button type="primary" size="mini" plain style="margin-left: 10%" @click="researchTrans(r.id)">
              受试者管理
            </el-button>
          </center>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listResearch, selectBySname } from "@/api/system/research";

export default {
  data() {
    return {
      inputSearch: '', // 输入框绑定变量
      researchList: [], // 研究项目列表
    };
  },

  created() {
    console.log('页面创建时 inputSearch:', this.inputSearch);
    // 页面加载时获取研究项目列表
    listResearch().then(res => {
      this.researchList = res;
      console.log('数据加载后 inputSearch:', this.inputSearch);
    });
  },

  methods: {
    // 刷新操作，清空输入框并重新加载数据
    async refresh() {
      this.inputSearch = '';  // 清空数据模型
      console.log('清空时 inputSearch 的值:', this.inputSearch);  // 打印清空后的值

      // 手动清空 DOM 中的输入框内容
      this.$refs.inputField.$el.querySelector('input').value = '';

      await this.$nextTick();  // 确保 DOM 更新完成
      console.log('nextTick 后 inputSearch 的值:', this.inputSearch);  // 检查清空操作是否生效

      // 重新加载研究项目列表
      const res = await listResearch();
      this.researchList = res;  // 刷新研究项目列表
    },

    // 研究项目管理跳转
    researchTrans(id) {
      this.$router.push('/subjecta?id=' + id);
    },

    // CRF 模板跳转
    crfTrans() {
      this.$router.push('/CRF');
    },

    // 查询操作，根据输入框内容进行查询
    searchTitle() {
      selectBySname(this.inputSearch).then(res => {
        this.researchList = res;
      });
    }
  }
};
</script>

<style scoped>
.inRes {
  width: 30%;
  margin-left: 10px;
}

.cardList {
  font-size: 12px;
  margin-top: 12px;
}

.container {
  display: flex;
}

.cardList2 {
  font-size: 12px;
  margin-top: 12px;
  flex: 1;
}
</style>
